/**
* @file  MaterialArea
* @author xiao_xie
* @date 2025-03-13
*/

import React from 'react';
import { AppstoreOutlined, BarsOutlined, CloseOutlined, CodeOutlined, ExpandAltOutlined } from '@ant-design/icons';
import ComponentLibrary from '../../../components/Editor/MaterialArea/ComponentLibrary';
import JSEditor from '../../../components/Editor/MaterialArea/JSEditor';
import Outline from '../../../components/Editor/MaterialArea/Outline';
import SourceCode from '../../../components/Editor/MaterialArea/SourceCode';


type Props = {
    isExpanded: boolean;
    onToggle: (value: boolean) => void;
}


const MaterialArea: React.FC<Props> = ({  onToggle }) => {
    const [activePanel, setActivePanel] = React.useState<string | null>(null);

    const menus = [
        {
            key: 'component',
            icon: <AppstoreOutlined className="text-lg" />,
            label: '组件库',
            component: <ComponentLibrary />
        },
        {
            key: 'outline',
            icon: <BarsOutlined className="text-lg" />,
            label: '大纲',
            component: <Outline />
        },
        {
            key: 'code',
            icon: <CodeOutlined className="text-lg" />,
            label: '源码',
            component: <SourceCode />
        },
        {
            key: 'js',
            icon: <ExpandAltOutlined  className="text-lg"/>,
            label: '页面JS',
            component: <JSEditor />
        }
    ];

    return (
        <div className="flex h-full">
            {/* 左侧导航图标 */}
            <div className="w-12 bg-gray-50 border-r border-gray-200 flex flex-col p-2 space-y-2">
                {menus.map(menu => (
                    <button
                        key={menu.key}
                        onClick={() => {
                            setActivePanel(activePanel === menu.key ? null : menu.key);
                            onToggle(true);
                        }}
                        className={`w-8 h-8 flex items-center justify-center rounded-lg
              hover:bg-blue-100 transition-colors duration-200
              ${activePanel === menu.key ? 'bg-blue-100 text-[#6366F1]' : 'text-gray-600'}`}
                        title={menu.label}
                    >
                        {menu.icon}
                    </button>
                ))}
            </div>

            {/* 可展开面板 */}
            <div className={`transition-all duration-300 overflow-hidden
        ${activePanel ? 'w-72' : 'w-0'} border-r border-gray-200`}>
                <div className="w-72 h-full">
                    {menus.map(menu => (
                        <div
                            key={menu.key}
                            className={`${activePanel === menu.key ? 'block' : 'hidden'} h-full`}
                        >
                            {/* 添加标题栏和关闭按钮 */}
                            <div className="flex justify-between items-center p-4 border-b border-gray-200">
                                <div className="text-lg font-medium text-gray-800">{menu.label}</div>
                                <button
                                    onClick={() => {
                                        setActivePanel(null)
                                        onToggle(false);
                                    }}
                                    className="p-1 hover:bg-gray-100 rounded-full transition-colors"
                                    title="关闭面板"
                                >
                                    <CloseOutlined className="text-gray-500 hover:text-gray-700" />
                                </button>
                            </div>
                            <div className="overflow-y-auto h-[calc(100%-3rem)]">
                                {menu.component}
                            </div>
                        </div>
                    ))}
                </div>
            </div>
        </div>
    );
};

export default MaterialArea;
